<template>
    <div style="display: flex;flex-wrap: wrap">
        <div style="width:100%;max-width: 1100px;display: flex;justify-content: space-between">
            <div v-if="power('WJOB_CONTAINERPLANJOB_STATISTICALQUERY')">
                <calendar-month ref="calendarMonth" :showZero='false' @handleMonth="v=>handleMonth(v.month)"></calendar-month>
                <div class="clear"></div>
                <div style="margin-top: 10px">
                    <div>全部作业量： {{ work.totalJobNum }}</div>
                    <ul class="statistics-calendar">
                        <li>提箱： {{ TXJH.totalJobNum }}</li>
                        <li>进场： {{ JCJH.totalJobNum }}</li>
                        <li>内转入场： {{ NZRC.totalJobNum }}</li>
                        <li>内转出场： {{ NZCC.totalJobNum }}</li>
                        <li>拆箱： {{ CXJH.totalJobNum }}</li>
                    </ul>
                    <div class="clear"></div>
                </div>
                <div style="margin-top: 10px">
                    <div>已作业量： {{ work.jobNum }}</div>
                    <ul class="statistics-calendar">
                        <li>提箱： {{ TXJH.jobNum }}</li>
                        <li>进场： {{ JCJH.jobNum }}</li>
                        <li>内转入场： {{ NZRC.jobNum }}</li>
                        <li>内转出场： {{ NZCC.jobNum }}</li>
                        <li>拆箱： {{ CXJH.jobNum }}</li>
                    </ul>
                    <div class="clear"></div>
                </div>
                <div style="margin-top: 10px">
                    <div>未作业量： {{ work.unJobNum }}</div>
                    <ul class="statistics-calendar">
                        <li>提箱： {{ TXJH.unJobNum }}</li>
                        <li>进场： {{ JCJH.unJobNum }}</li>
                        <li>内转入场： {{ NZRC.unJobNum }}</li>
                        <li>内转出场： {{ NZCC.unJobNum }}</li>
                        <li>拆箱： {{ CXJH.unJobNum }}</li>
                    </ul>
                    <div class="clear"></div>
                </div>
            </div>
            <calendar-components ref="calendar" :showZero='false'></calendar-components>
        </div>
        <!--<template>-->
            <div style="width: 100%;margin-top: 20px">
                <template>
                    <el-row style="margin-bottom: 20px">
                        <el-col :span="24">
                            <el-button type="primary" @click="opendDialog('container')" v-if="power('WJOB_CONTAINERPLANJOB_CONTAINERTRACKING')">
                                集装箱跟踪
                            </el-button>
                            <el-button type="primary" @click="opendDialog('inCon')" v-if="power('WCARGO_CONTAINERMGR_INPORT:QUERY')">
                                在港箱查询
                            </el-button>
                            <el-button type="primary" @click="opendDialog('unbox')" v-if="power('WJOB_CONTAINERPLANJOB_CXRECORDQUERY')">
                                拆箱记录查询
                            </el-button>
                            <el-button type="primary" @click="opendDialog('arrive')" v-if="power('WJOB_CONTAINERPLANJOB_ARRIVECONFIRMQUERY')">
                                到达确报查询
                            </el-button>
                        </el-col>
                    </el-row>
                </template>
                <el-tabs v-model="component" type="card">
                    <el-tab-pane v-for="item in componentName" :label="item.label" :name="item.name"
                                 :key="item.component"
                                 v-if="power(item.show)">
                    </el-tab-pane>
                </el-tabs>
                <keep-alive>
                    <component :is="component" @changeInfo="changeCalendar" ref="component"></component>
                </keep-alive>

            </div>
        <!--</template>-->

        <unbox-search ref="unboxSearch"></unbox-search>
        <arrive-components ref="arriveComponents"></arrive-components>
    </div>
</template>

<style>
</style>

<script>
import calendarComponents from "../../../components/calendar/calendar";
import calendarMonth from "../../../components/calendar/month";
import suitcaseTR from "./suitcaseTR"; //火车提箱（指定箱）
import heapCarTR from "./heapCarTR"; //火车提箱（大堆箱）
import enterTR from "./enterTR"; //火车进场
import unbox from "./unbox"; //拆箱作业
import suitcaseCR from "./suitcaseCR"; //汽车提箱（指定箱）
import heapCarCR from "./heapCarCR"; //汽车提箱（大堆箱）
import enterCR from "./enterCR"; //汽车进场
import NZCC from "./NZCC"; //内转出场
import NZRC from "./NZRC"; //内转入场
import unboxSearch from "./dialogs/unboxSearch"; //拆箱记录查询
import { companyNature, customType } from "@/assets/dict";
import { getWorkStatistics } from "@/api/containerJob/containerJob";
import { getLocalTime } from "@/utils/dateFormat";
import arriveComponents from "../gatePanel/arriveComponents";
import { calendar } from "../../../api/containerJob/containerJob";

export default {
  name: "containerJobPage",
  components: {
    suitcaseTR,
    heapCarTR,
    enterTR,
    unbox,
    suitcaseCR,
    heapCarCR,
    enterCR,
    NZCC,
    NZRC,
    unboxSearch,
    calendarComponents,
    calendarMonth,
    arriveComponents
  },
  data() {
    return {
      component: "",
      dateType: true,
      componentName: [
        {
          label: "火车提箱（指定箱）",
          name: "suitcaseTR",
          show:"WJOB_CONTAINERPLANJOB_TRAINTX"
        },
        {
          label: "火车提箱（大堆箱）",
          name: "heapCarTR",
          show:"WJOB_CONTAINERPLANJOB_TRAINTX"
        },
        {
          label: "火车进场",
          name: "enterTR",
          show:"WJOB_CONTAINERPLANJOB_TRAINJC:QUERY"
        },
        {
          label: "拆箱作业",
          name: "unbox",
          show:"WJOB_CONTAINERPLANJOB_CX:QUERY"
        },
        {
          label: "汽车提箱（指定箱）",
          name: "suitcaseCR",
          show:"WJOB_CONTAINERPLANJOB_CARTX:QUERY"
        },
        {
          label: "汽车提箱（大堆箱）",
          name: "heapCarCR",
          show:"WJOB_CONTAINERPLANJOB_CARTX:QUERY"
        },
        {
          label: "汽车进场",
          name: "enterCR",
          show:"WJOB_CONTAINERPLANJOB_CARJC:QUERY"
        },
        {
          label: "内转出场",
          name: "NZCC",
          show:"WJOB_CONTAINERPLANJOB_NZCC:QUERY"
        },
        {
          label: "内转入场",
          name: "NZRC",
          show:"WJOB_CONTAINERPLANJOB_NZJC:QUERY"
        }
      ],
      work: {},
      JCJH: {
        totalJobNum: 0,
        jobNum: 0,
        unJobNum: 0
      },
      TXJH: {
        totalJobNum: 0,
        jobNum: 0,
        unJobNum: 0
      },
      NZRC: {
        totalJobNum: 0,
        jobNum: 0,
        unJobNum: 0
      },
      NZCC: {
        totalJobNum: 0,
        jobNum: 0,
        unJobNum: 0
      },
      CXJH: {
        totalJobNum: 0,
        jobNum: 0,
        unJobNum: 0
      }
    };
  },
  mounted() {
    this.handleMonth();
    for (let i = 0; i < this.componentName.length; i++) {
      const element = this.componentName[i];
      if(this.power(element.show)){
        this.component=element.name
        return
      }
    }
  },
  methods: {
    changeCalendar() {
      if (this.$refs.calendarMonth) {
        this.$refs.calendarMonth.getMonthDay();
        this.$refs.calendar.getMonthDay();
        this.handleMonth();
      }
    },
    opendDialog(type) {
      if (type == "container") {
        this.$router.push("/business/busPla/Track");

        // this.$refs.containerSearch.dialogForm = true
      } else if (type == "arrive") {
        // this.$router.push('/work/gatePanel')

        this.$refs.arriveComponents.dialogForm = true;
        this.$nextTick(() => {
          this.$refs.arriveComponents.loadData();
        });
      } else if (type == "inCon") {
        this.$router.push("/business/busPla/ContainerOnPort");
        // this.$refs.inConSearch.dialogForm = true
      } else if (type == "unbox") {
        this.$refs.unboxSearch.dialogForm = true;
        this.$nextTick(() => {
          this.$refs.unboxSearch.loadData();
        });
      }
    },
    handleMonth(date) {
      let params = {
        search_GTE_dateTime: date || getLocalTime(new Date(), "YYYY-MM-DD")
      };
      getWorkStatistics(params).then(res => {
        this.work = res.data;
        this.work.containerJobStatNumDTOs.map(m => {
          if (m.planType === "JCJH") {
            this.JCJH = m;
          }
          if (m.planType === "TXJH") {
            this.TXJH = m;
          }
          if (m.planType === "NZRC") {
            this.NZRC = m;
          }
          if (m.planType === "NZCC") {
            this.NZCC = m;
          }
          if (m.planType === "CXJH") {
            this.CXJH = m;
          }
        });
      });
    },
    handleChange(val){
      console.log(val);
    }
  },
  watch: {
    //-
  }
};
</script>

<style>
.calendar-count h3 {
  margin-top: 15px;
}

.statistics-calendar li {
  margin-top: 8px;
  float: left;
  width: 98px;
  font-size: 14px;
}
</style>
